<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>登录</title>

    <script src="/js/jquery-3.5.0.js" type="text/javascript"></script>

    <style type="text/css">
      body {
        background-color: #00b38a;
        text-align: center;
      }

      .lp-login {
        position: absolute;
        width: 500px;
        height: 300px;
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -250px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #12a591;
        padding: 57px 50px 35px;
        box-sizing: border-box;
      }

      .lp-login .submitBtn {
        display: block;
        text-decoration: none;
        height: 48px;
        width: 150px;
        line-height: 48px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background-image: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#09cb9d),
          to(#02b389)
        );
        background-image: linear-gradient(90deg, #09cb9d, #02b389);
        border-radius: 3px;
      }

      input[type="text"] {
        height: 30px;
        width: 250px;
      }

      input[type="password"] {
        height: 30px;
        width: 250px;
      }

      span {
        font-style: normal;
        font-variant-ligatures: normal;
        font-variant-caps: normal;
        font-variant-numeric: normal;
        font-variant-east-asian: normal;
        font-weight: normal;
        font-stretch: normal;
        font-size: 14px;
        line-height: 22px;
        font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial,
          "Helvetica Neue", Helvetica, monospace;
      }
    </style>
    <script type="text/javascript">
      $(function () {
        $("#loginBtn").click(function () {
          const email = $("#email").val();
          const password = $("#password").val();
          if (email === "") {
            alert("邮箱不能为空");
            return;
          }
          if (password === "") {
            alert("密码不能为空");
            return;
          }
          $.ajax({
            type: "GET",
            url: "/api/user/login/" + email + "/" + password,
            success: function (result) {
              if (result.success) {
                window.location.href = "welcome.html?email=" + result.data;
              } else {
                alert(result.errorMsg);
              }
            },
          });
        });
      });
    </script>
  </head>
  <body>
    <table class="lp-login">
      <tr>
        <td align="right"><span>邮&nbsp;&nbsp;&nbsp;箱</span></td>
        <td align="center">
          <input id="email" name="email" type="text" />
        </td>
      </tr>
      <tr>
        <td align="right"><span>密&nbsp;&nbsp;&nbsp;码</span></td>
        <td align="center">
          <input id="password" name="password" type="password" />
        </td>
      </tr>
      <tr align="center">
        <td colspan="2">
          <input id="loginBtn" type="button" value="登&nbsp;&nbsp;&nbsp;录" />
          &nbsp;&nbsp;&nbsp;
          <a href="/register.html">注册账号</a>
        </td>
      </tr>
    </table>
  </body>
</html>
